<template>
  <el-container>

    <!--    查询条件页面-->
    <el-header style="height: 100px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="平台名称">
          <el-input v-model="formInline.platformName" placeholder="平台名称"></el-input>
        </el-form-item>
        <el-form-item label="版本名称">
          <el-input v-model="formInline.versionName" placeholder="版本名称"></el-input>
        </el-form-item>
        <el-form-item label="用例名称">
          <el-input v-model="formInline.caseName" placeholder="用例名称"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="用例类型">
          <el-select v-model="formInline.caseType" placeholder="用例类型">
            <el-option label="功能测试" value="1"></el-option>
            <el-option label="性能测试" value="2"></el-option>
            <el-option label="数据生成" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用例等级">
          <el-select v-model="formInline.caseLevel" placeholder="用例等级">
            <el-option label="低" value="1"></el-option>
            <el-option label="中" value="2"></el-option>
            <el-option label="高" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryJmeterPage">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="saveJmeter">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

    </el-header>

    <el-main>
      <!--      脚本信息table页面-->
      <el-table
          ref="singleTable"
          :data="jmeterData"
          highlight-current-row
          style="width: 100%">
        <el-table-column
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            property="platformName"
            label="平台名称">
        </el-table-column>
        <el-table-column
            property="versionName"
            label="版本名称">
        </el-table-column>
        <el-table-column
            property="caseName"
            label="用例名称">
        </el-table-column>
        <el-table-column
            property="caseType"
            label="用例类型"
            :formatter="caseTypeFormatter">
        </el-table-column>
        <el-table-column
            property="caseLevel"
            label="用例等级"
            :formatter="caseLevelFormatter">
        </el-table-column>
        <el-table-column
            property="executeCount"
            label="执行次数">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="300px">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="success"
                round
                :loading=loadingStatus
                @click="handleRun(scope.$index, scope.row)">运行
            </el-button>
            <el-link type="primary" style="padding-left: 10px" :underline="false" :href=scope.row.reportUrl target="_blank">查看报告<i class="el-icon-data-analysis el-icon--right"></i></el-link>
            <el-popconfirm
                style="margin-left: 5px"
                title="确定删除？"
                icon="el-icon-info"
                icon-color="red"
                confirmButtonText='确定'
                cancelButtonText="取消"
                @confirm="confirmDelete(scope.$index, scope.row)"
            >
              <el-button
                  slot="reference"
                  size="mini"
                  type="danger">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页插件-->
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.formInline.pageNumber
            :page-sizes="[10, 20, 50, 100]"
            :page-size=this.formInline.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.pageTotal>
        </el-pagination>
      </div>
      <!--      新增用户弹窗-->
      <el-dialog title="新增用例" :visible.sync="dialogFormVisibleSave">
        <el-form :model="saveJmeterInfo" label-width="80px">
          <el-form-item label="平台名称">
            <el-input placeholder="请输入平台名称" v-model="saveJmeterInfo.platformName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="版本">
            <el-input placeholder="请输入版本" v-model="saveJmeterInfo.versionName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用例名称">
            <el-input placeholder="请输入用例名称" v-model="saveJmeterInfo.caseName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用例类型">
            <el-select v-model="saveJmeterInfo.caseType" placeholder="请选择用例类型">
              <el-option label="功能测试" value="1"></el-option>
              <el-option label="性能测试" value="2"></el-option>
              <el-option label="数据生成" value="3"></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="用例等级">
            <el-select v-model="saveJmeterInfo.caseLevel" placeholder="请选择用例等级">
              <el-option label="低" value="1"></el-option>
              <el-option label="中" value="2"></el-option>
              <el-option label="高" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用例描述">
            <el-input type="textarea" placeholder="请输入用例描述" v-model="saveJmeterInfo.caseDescription"></el-input>
          </el-form-item>

          <el-form-item label="上传脚本">

            <el-upload
                ref="upload"
                class="upload-demo"
                action="/api/common/uploadJmeterWindows"
                :auto-upload="true"
                :show-file-list="false"
                :on-success="successUpload"
            >
              <el-button type="warning">上传脚本文件</el-button>
            </el-upload>
            <el-input v-model="saveJmeterInfo.caseWindowsPath" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelSave">取 消</el-button>
          <el-button type="primary" @click="saveUserInfoClick">确 定</el-button>
        </div>
      </el-dialog>
      <!--      编辑脚本弹窗-->
      <el-dialog title="编辑用例" :visible.sync="dialogFormVisibleEdit">
        <el-form :model="editJmeterInfo" label-width="80px">
          <el-form-item label="平台名称">
            <el-input placeholder="请输入平台名称" v-model="editJmeterInfo.platformName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="版本">
            <el-input placeholder="请输入版本" v-model="editJmeterInfo.versionName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用例名称">
            <el-input placeholder="请输入名称" v-model="editJmeterInfo.caseName"></el-input>
          </el-form-item>
          <el-form-item label="用例类型">
            <el-select v-model="editJmeterInfo.caseType" placeholder="请选择用例类型">
              <el-option label="功能测试" value=1></el-option>
              <el-option label="性能测试" value=2></el-option>
              <el-option label="数据生成" value=3></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="用例等级">
            <el-select v-model="editJmeterInfo.caseLevel" placeholder="请选择用例等级">
              <el-option label="低" value=1></el-option>
              <el-option label="中" value=2></el-option>
              <el-option label="高" value=3></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用例描述">
            <el-input type="textarea" placeholder="请输入用例描述" v-model="editJmeterInfo.caseDescription"></el-input>
          </el-form-item>
          <el-form-item label="上传脚本">

            <el-upload
                ref="upload"
                class="upload-demo"
                action="/api/common/uploadJmeterWindows"
                :auto-upload="true"
                :show-file-list="false"
                :on-success="successUploadEdit"
            >
              <el-button type="warning">上传脚本文件</el-button>
            </el-upload>
            <el-input v-model="editJmeterInfo.caseWindowsPath" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelEdit">取 消</el-button>
          <el-button type="primary" @click="editJmeterInfoClick">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>

  </el-container>
</template>

<script>
export default {
  name: "JmeterIndex",
  data() {
    return {
      formInline: {
        platformName: '',
        versionName: '',
        caseName: '',
        caseType: null,
        caseLevel: null,
        pageNumber: 1,
        pageSize: 10
      },
      pageTotal: null,
      jmeterData: [],
      editJmeterInfo: {
        id: null,
        platformName: '',
        versionName:'',
        caseName: '',
        caseType: '',
        caseLevel: '',
        caseDescription: '',
        caseWindowsPath: ''
      },
      dialogFormVisibleSave: false,
      dialogFormVisibleEdit: false,
      saveJmeterInfo: {
        platformName: '',
        versionName: '',
        caseName: '',
        caseType: null,
        caseLevel: null,
        caseDescription: '',
        caseWindowsPath: ''
      },
      loadingStatus : false,
    }
  },
  methods: {

    // 模糊查询+分页查询
    queryJmeterPage() {
      console.log('queryJmeterPage!');
      this.postRequest('/apiAuto/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp) {
          if (resp.code === 200) {
            this.jmeterData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          } else {
            console.log("查询错误")
          }
        } else {
          console.log("查询错误")
        }
      })
    },
    // 重置查询条件
    resetQuery() {
      this.formInline.caseLevel = null;
      this.formInline.caseType = null;
      this.formInline.caseName = '';
      this.formInline.platformName = '';
      this.formInline.versionName = '';
      this.formInline.pageSize = 10;
      this.formInline.pageNumber = 1;
      this.queryJmeterPage();
    },

    //用例类型映射
    caseTypeFormatter(row) {
      switch (row.caseType) {
        case 1:
          return "功能测试";
        case 2:
          return "性能测试";
        case 3:
          return "数据生成";
      }
    },
    //用例等级映射
    caseLevelFormatter(row) {
      switch (row.caseType) {
        case 1:
          return "低";
        case 2:
          return "中";
        case 3:
          return "高";
      }
    },

    //切换展示数量
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.postRequest('/apiAuto/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp) {
          if (resp.code === 200) {
            this.jmeterData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          } else {
            console.log("查询错误")
          }
        } else {
          console.log("查询错误")
        }
      })
    },

    //切换当前页码
    handleCurrentChange(val) {
      this.formInline.pageNumber = val;
      this.postRequest('/apiAuto/findPage', this.formInline).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp) {
          if (resp.code === 200) {
            this.jmeterData = resp.data.list;
            this.formInline.pageNumber = resp.data.pageNum;
            this.pageTotal = resp.data.total;
          } else {
            console.log("查询错误")
          }
        } else {
          console.log("查询错误")
        }
      })
    },


    //新增接口脚本
    saveJmeter() {
      this.dialogFormVisibleSave = true;
    },

    //文件上传成功后的回调函数，为了赋值
    successUpload(res, file) {
      console.log("======================");
      console.log(JSON.stringify(res));
      this.saveJmeterInfo.caseWindowsPath = res.data;
    },

    //取消保存脚本
    cancelSave() {
      this.dialogFormVisibleSave = false;
      this.resetSave();
    },

    //确认保存脚本
    saveUserInfoClick() {
      this.postRequest('/apiAuto/saveJmxWindows', this.saveJmeterInfo).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp) {
          if (resp.code === 200) {
            this.dialogFormVisibleSave = false;
            this.queryJmeterPage();
            this.resetSave();
          } else {
            console.log("新增错误")
          }
        } else {
          console.log("查询错误")
        }
      })
    },

    //编辑脚本信息
    handleEdit(index, row) {
      this.getRequest('/apiAuto/getJmeterById/' + row.id).then(resp => {
        if (resp) {
          if (resp.code === 200) {
            this.dialogFormVisibleEdit = true;
            this.editJmeterInfo.id = resp.data.id;
            this.editJmeterInfo.platformName = resp.data.platformName;
            this.editJmeterInfo.versionName = resp.data.versionName;
            this.editJmeterInfo.caseName = resp.data.caseName;
            this.editJmeterInfo.caseType = resp.data.caseType;
            this.editJmeterInfo.caseLevel = resp.data.caseLevel;
            this.editJmeterInfo.caseDescription = resp.data.caseDescription;
            this.editJmeterInfo.caseWindowsPath = resp.data.caseWindowsPath;
          } else {
            console.log("编辑错误")
          }
        } else {
          console.log("编辑错误")
        }
      })
    },

    //清除保存信息
    resetSave() {
      this.saveJmeterInfo.caseWindowsPath = '';
      this.saveJmeterInfo.caseDescription = '';
      this.saveJmeterInfo.caseLevel = null;
      this.saveJmeterInfo.caseName = '';
      this.saveJmeterInfo.caseType = null;
      this.saveJmeterInfo.platformName = '';
      this.saveJmeterInfo.versionName = '';
    },

    //清除编辑信息
    resetEdit() {
      this.editJmeterInfo.id = null;
      this.editJmeterInfo.platformName = '';
      this.editJmeterInfo.caseName = '';
      this.editJmeterInfo.caseType = null;
      this.editJmeterInfo.caseLevel = null;
      this.editJmeterInfo.caseDescription = '';
      this.editJmeterInfo.caseWindowsPath = '';
    },

    //修改脚本路径
    successUploadEdit(res, file) {
      this.editJmeterInfo.caseWindowsPath = res.data;
    },

    //取消编辑
    cancelEdit() {
      this.dialogFormVisibleEdit = false;
      this.resetEdit();
    },

    //提交编辑
    editJmeterInfoClick() {
      this.postRequest('/apiAuto/update', this.editJmeterInfo).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp) {
          if (resp.code === 200) {
            this.dialogFormVisibleEdit = false;
            this.resetEdit();
            this.queryJmeterPage();
          } else {
            console.log("编辑错误")
          }
        } else {
          console.log("编辑错误")
        }
      })
    },

    //运行脚本
    handleRun(index, row){
      this.loadingStatus = true;
      this.$message({
        message: '脚本运行中，请等待...',
        type: 'success'
      });
      this.getRequest('/apiAuto/runWindowsById/' + row.id).then(resp => {
        if (resp) {
          if (resp.code === 200) {
            this.loadingStatus = false;
          } else {
            console.log("运行错误")
          }
        } else {
          console.log("运行错误")
        }
      })
    },

    //删除用户
    confirmDelete(index, row) {
      console.log(row.id);
      this.getRequest('/apiAuto/delete/' + row.id).then(resp => {
        // console.log(JSON.stringify(resp) + '/findPage信息=====')
        if (resp){
          if (resp.code === 200){
            console.log("删除成功");
            this.queryJmeterPage();
          }
          else {
            console.log("删除错误")
          }
        }else {
          console.log("删除错误")
        }
      })
    },
  },
  created() {
    this.queryJmeterPage()
  }
}
</script>

<style scoped>
.el-container {
  border: none;
}

.el-header {
  padding: 5px 5px 5px 5px;
}

.el-main {
  color: #333;
}

.block {
  float: right;
  margin-top: 20px;
}
</style>